page {
  background: #f9f9f9;
}
.nav{
    position: fixed;
}

.content {
  width: 100%;
}


.group-detail{
  width: 100%;
  min-height: 375rpx;
  background: #fff;
  position: fixed;
  z-index: 2;
  bottom:0;
}
.group-detail-medium{
    width:538rpx;
    z-index:2;
}
.group-detail-medium .list{
    padding:30rpx 48rpx 60rpx 48rpx;
}
.group-detail-medium .list.bg .group-detail-title{
    display:block;
    color: #333;
    font-weight: 700;
    margin: 30rpx 0 16rpx 0;
    height: auto;
}
.group-detail-medium .list.bg .group-item{
    text-align: left;
    color: #666;
    font-weight: 400;
    font-size: 24rpx;
    margin:0;
}
.group-detail-title{
  font-size:30rpx;
  color:rgba(51,51,51,1);
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.group-detail-list{
  display: flex;
  flex-direction: column;
  padding-bottom: 30rpx;
}

.group-item{
  margin:25rpx 0 0 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.group-item text{
  font-size:26rpx;
  color:#999999;
  margin-left:30rpx;
}

.group-item .icon{
  width:10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.group-item icon{
  width: 6rpx;
  height:6rpx;
  background: #D8D8D8;
  border-radius: 3rpx;
}

.group-item:last-child icon{
  width: 10rpx;
  height:10rpx;
  background: #8DEFD0;
  border-radius: 5rpx;
}

.group-item .text{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.group-item .t1{
  margin-right: 24rpx;
}

.group-item:last-child text{
  color:#333333;
}

.group-item:before{
  content: "";
  width: 2rpx;
  height: 36rpx;
  background:#F0F0F0 ;
  position: absolute;
  top:35rpx;
  left: 4rpx;
}

.group-item:last-child:before{
  background:#FFFFFF ;
}

.address{
  width: 100%;
  display: flex;
  flex-direction:column;
  background: #FFFFFF;
  padding-bottom:32rpx;
}

.address .status-view{
  width: 100%;
  color:#333;
  font-size: 34rpx;
  font-weight:500;
  align-items:center;
  display:flex;
  justify-content:center;
  line-height:100rpx;
  position: relative;
  flex-direction: row;
  margin-top: 20rpx;
}
.address .status-view.round{
    flex-direction: column;
}
.address .status-view .red{
    color: #FF4F54;
}
.address .status-view.round .right-red{
    padding:100rpx;
    border-radius:100%;
    position:relative;
     background: #FF4F54;
}

.address .status-view .right-red{
    background: #12D195;
    text-align: center;
    position:absolute;
    right:0;
    padding:8rpx 20rpx 8rpx 30rpx;
    border-bottom-left-radius:40rpx;
    border-top-left-radius:40rpx;
    line-height: 1;
}
.address .status-view .right-red text{
    color: #fff;
    font-size: 24rpx;
    font-weight: 400;
}
.address .status-view.round .right-red text{
    display: block;
    line-height:3;
    position:absolute;
    top:10rpx;
    font-size: 24rpx;
}
.address .status-view.round .right-red .num{
    font-size: 66rpx;
    margin-left:0rpx;
}
.address .status-view .right-red .num{
    font-weight:500;
    font-size:30rpx;
    margin-left:10rpx;
}
.address .status-view.round .right-red .num_load{
    font-size:30rpx;
    top:35%;
    margin-left:0rpx;
}
.address .status-view .right-red .num_load{
    margin-left:10rpx;
}

.address .status-manager{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top:28rpx;
    margin-bottom:40rpx;
    padding-bottom:24rpx;

}

.address .status-manager .status{
    width:100%;
    text-align: center;
    font-size:24rpx;
    color:#666;
}

.address .status-manager .status-info{
    min-height:90rpx;
    display: flex;
    flex-direction:row;
    margin:1rpx 0 0 24rpx;
    align-items: center;
}

.address .status-manager .status-info .left{
    flex: 1;
    font-size:30rpx;
    font-weight:400;
    color:rgba(102,102,102,1);
}

.address .status-manager .status-info .right{
    width:100rpx;
    height:90rpx;
    background: #8DEFD0;
    color: #333333;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}

.address .status-manager .status-info .right text:first-child{
    font-size: 24rpx;
}

.address .status-manager .status-info .right text:last-child{
    font-size: 36rpx;
}

.address .status-button{
    justify-content: flex-start;
}
.address .status-button view,.address .status-button button{
    margin:0rpx 0 0 24rpx;
    font-size: 28rpx;
    color: #666666;
    border: 2rpx solid rgba(221, 221, 221, .3);
    border-radius: 5rpx;
    font-weight:400;
    // padding:0rpx 20rpx;
    height:56rpx;
    display: inline-block;
    line-height: 2;
    text-align: center;
}
.address .status-button.contact view,.address .status-button button{
     border-radius: 6rpx;
}
.address .status-button button{
    height:58rpx;
}
.address .status-button.contact .icon,.address .status-button.contact .green .icon{
    margin-right: 10rpx;
    margin-bottom: 0;
}

// .address .status-button .green,.status-button .green{
//     border: 2rpx solid #12D195;
//     color: #12D195;
// }

.status-button.contact.no_out .green{
    border-color: #fff;
    font-size: 30rpx;
    padding-left: 0;
    color:#12D195;

}
.status-button.contact .flex_1{
    flex: 1;
    max-width: 192rpx;
}
.status-button.contact .gray .icon{
    display: inline-block;
    width:32rpx;
    height: 32rpx;
    background: url(http://img1.birdback.org/a/d8/4f/d84fedf67e3ac4bd461d5a1b937dc3d4.png) no-repeat;
    background-size: 100% 100%;
    
}
.status-button.contact .gray text{
    vertical-align: middle;
}
.status-button.contact.customService .green .icon{
    background: url(http://img1.birdback.org/a/88/e7/88e7dec49fabb4e0ee9040a04f75ee7c.png) no-repeat;
    background-size: 100% 100%;
}
.status-button.contact .green .icon{
    display: inline-block;
    width:32rpx;
    height: 32rpx;
    background: url(http://img1.birdback.org/a/b0/2b/b02b477cc92233e0179495d841caf8db.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom:4px;
    margin-right: 12rpx;
    vertical-align:middle;
}
.address .status-button .green_bg{
    color: #fff;
    background: #12D195;
    width: 110rpx;
    height: 56rpx;
    font-size: 28rpx;
    padding: 0;
}
.status-button.contact view{
    font-size: 28rpx;
}
.status-button.contact.no_out view{
    font-size: 30rpx;
}

.group-share-box{
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
}

.group-share-mask {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
}

.group-view{
  position: relative;
  z-index: 2;
  width:698rpx;
  height:596rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 340rpx;
  background: url(http://img1.birdback.org/a/c3/f3/c3f3c4f22431c1c10a3dbf37dce75aae.png) no-repeat;
  background-size: 100% 100%;
}
.group-view .cancel_icon{
    position: absolute;
    z-index: 4;
    right:-10rpx;
    top: -10rpx;
}
.group-view button{
  width:240rpx;
  height:80rpx;
  background: url(http://img1.birdback.org/a/8c/97/8c970d4065074cb615b0cfb5fa625461.png) no-repeat;
  background-size: 100% 100%;
}

.group-view image{
  width:100%;
  height:100%;
}

.group-view text{
  font-size: 30rpx;
  font-weight:500;
  color:#fff;
  margin-left:40rpx;
}
.group-view .group_inner{
    position: absolute;
    z-index: 3;
    top:156px;
    text-align: center;
    width:100%;
}
.group-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left:40rpx;
}

.group-enter{
  background: #8DEFD0;
  margin: 24rpx auto 0;
}

.rid-info{
  height: 160rpx;
  display: flex;
  flex-direction:row;
  align-items: center;
    justify-content: space-between;
  margin-top:20rpx;
  background: #fff;
}

.rid-info .rid-left{
    display: flex;
    flex-direction:row;
    align-items: center;
    font-size: 32rpx;
    color: #000000;
}

.rid-info .rid-left view{
    margin-left: 18rpx;
}


.rid-info .rid-left text{
    color: #00B89D;
    font-size: 20rpx;
    border:2rpx solid #00B89D;
    padding:2rpx 10rpx;
    border-radius: 0 10rpx 0 10rpx;
    margin-bottom: 20rpx;
    margin-left:15rpx;
}

.rid-info .rid-left image{
  width:100rpx;
  height: 100rpx;
  border-radius: 50rpx;
    margin-left: 24rpx;
}

.rid-info .rid-right image{
    width:60rpx;
    height: 60rpx;
    margin-right: 30rpx;
    margin-top: 20rpx;
}


.btn-group{
  height: 120rpx;
  display: flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
}

.content {
  position:relative;
  background: #f9f9f9;
}

.bar {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.bar .icon {
  width: 34.6rpx;
  height: 34.6rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/wode_dianhua@3x.png)no-repeat;
  background-size: 100% 100%;
}

.bar .text {
  font-size: 32rpx;
  color: #181830;
  margin-left: 20rpx;
  margin-right: 50rpx;
}

.jt {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}

.jt view {
  width: 24rpx;
  height: 24rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/liebiao_jiantou@3x.png)no-repeat;
  background-size: 100% 100%;
  margin-right: 24rpx;
}

.buy-info {
  width: 97%;
  margin: 0 auto;
  border-radius: 4rpx;
  background: #fff;
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title_out{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
    align-items: center;
    width:95%;
    line-height: 28rpx;
}
.buy-info .title {
  width: 95%;
  height: 90rpx;
  flex:1;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  
}

.buy-info .title .icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 100%;
  border: 2rpx solid rgba(0, 0, 0, 0.08);
}

.buy-info .title .text {
  margin-left: 16rpx;
}
.arr_right{
    margin-left:40rpx;
}

.buy-list {
  width: 100%;
  overflow: hidden;
}

.buy-list .item {
  height: 168rpx;
  display: flex;
  flex-direction: row;
  padding:0 24rpx;
}


.buy-list .item-left image {
  width: 120rpx;
  height: 120rpx;
  margin-top: 24rpx;
  border-radius: 4rpx;
}

.buy-list .item-right {
  flex: 1;
}

.buy-list .item-right .name {
  margin: 20rpx 0 0 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.buy-list .item-right .name .text {
  font-size: 30rpx;
  color: #333;
}

.buy-list .item-right .name .price {
  font-size: 30rpx;
  color: #181830;
}

.buy-list .item-right .setting,.buy-list .item-right .num  {
  margin: 4rpx 0 0 24rpx;
  font-size: 24rpx;
  color: #333;
}

.buy-detail {
  width: 100%;
  padding-top:16rpx;
}

.share_more.button {
  width: 180rpx;
  height: 50rpx;
  font-size: 24rpx;
  color: #545455;
  border: 2rpx solid #c7c7c7;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 36rpx auto 0;
}

.share_more.button icon {
  width: 16rpx;
  height: 16rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/tijiaodingdan_zhankaigengduo@3x.png)no-repeat;
  background-size: 100% 100%;
  margin-left: 10rpx;
}

.share_more.button icon.ck {
  background: url(http://juhuijia2.birdback.org/mapi/i/tijiaodingdan_shouqi@3x.png)no-repeat;
  background-size: 100% 100%;
}

.buy-detail-item {
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 30rpx;
}

.buy-detail-item .text {
  color: #333;
}

.buy-detail-item .price {
  color: #333;
}

.buy-detail-item .youhui {
  display: flex;
  flex-direction: row;
  line-height: 31rpx;
}

.buy-detail-item .discount{
  width: 30rpx;
  height: 30rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/shouye_discount@3x.png)no-repeat;
  background-size: 100% 100%;
}

.buy-detail-item .youhui text {
  margin-left: 16rpx;
  color: #333;
}

.buy-detail-item .youhui-price {
  color: #FF2C2B;
  font-weight: 500;
}

.settlement {
  width: 100%;
}

.settlement .settlement-box {
  height: 90rpx;
  display: flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  align-items: center;
  margin:0 12rpx;
  padding:0 12rpx;
  overflow-y:hidden;
}

.settlement .wz {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.settlement .youhui {
  font-size: 24rpx;
  color: #888;
  margin-right: 20rpx;
}

.settlement .sum {
  font-weight: 500;
  font-size: 30rpx;
  color: #40404e;
}

.settlement .sum text {
  font-size: 30rpx;
  color: #FF2C2B;
}

.fujia {
  width: 97%;
  margin: 0 auto;
  border-radius: 4rpx;
  background: #fff;
  margin-top: 10rpx;
  padding-bottom:40rpx;
  &.comment{
      padding-bottom: 0;
      .arr_right{
          width: 20rpx;
          height: 24rpx;
      }
  }
}

.fujia .option {
  background: #fff;
  margin:0 24rpx;
}

.fujia .item {
  display: flex;
  min-height: 100rpx;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid rgba(221, 221, 221, .3);
  .ti{
      font-weight: 500;
    }
}
.fujia .option:last-child .item{
    border: 0;
}

.fujia .item view {
  width: 160rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.fujia .item view text {
  color: #999;
  font-size: 28rpx;
}

.fujia .item .add,.fujia .item text{
  font-size: 28rpx;
  color: #333;
  width:auto;
  flex:1
}

.fujia .item icon {
  width: 13rpx;
  height: 24rpx;
  background: url(http://juhuijia2.birdback.org/mapi/i/liebiao_jiantou@3x.png)no-repeat;
  background-size: 100% 100%;
  margin-left: 15rpx;
}

.fujia .item text.no-flex {
  flex: none;
}

.fujia .item input {
  text-align: right;
  font-size: 34rpx;
  color: #181830;
  flex: 1;
  height: 100%;
}

.buyinfo {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  background: #40404e;
  box-shadow: 0 -4rpx 8rpx 0 rgba(0, 0, 0, 0.02);
}

.buyinfo-left {
  flex: 1;
}

.buyinfo-button {
  width: 208rpx;
  height: 100rpx;
  background-image: linear-gradient(-123deg, #a0f4c9 0%, #73e9da 100%);
}

.buyinfo-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 30rpx;
}

.buyinfo-left text:first-child {
  font-size: 32rpx;
  color: #fff;
  margin-left: 24rpx;
}

.buyinfo-left text:last-child {
  font-size: 28rpx;
  color: #81818d;
  margin-left: 30rpx;
}

.buyinfo-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.buyinfo-button text {
  font-size: 32rpx;
  color: #40404e;
}

.box {
  width: 100%;
  height: 44rpx;
}
.steps{
    flex-grow:1;
}
.steps .status_time{
    height:40rpx;
    color: #333;
    font-weight: 500;
    font-size: 28rpx;
    text-align: center;
    width:100%;
}
.steps .dot_content{
    margin:16rpx 0;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.steps .dot_content .dot_line{
    height: 2rpx;
    flex:1;
}
.steps .dot_content .dot_round{
    width:22rpx;
    height: 22rpx;
    background:#333;
    margin: 0 7rpx;
    border-radius: 100%;
}
.steps .dot_content .dot_line.black{
    background-image: url(http://img1.birdback.org/a/15/d0/15d0a372d836646b65c2c205a3d899f1.png);
}
.steps .dot_content .dot_line.gray{
    background-image: url(http://img1.birdback.org/a/04/c7/04c7a2878c2ab226fce9e2826b200e34.png);
}
/* .steps.gray .dot_content .dot_line{
    background-image: url(http://img1.birdback.org/a/04/c7/04c7a2878c2ab226fce9e2826b200e34.png);
} */
.steps .dot_content .dot_round.gray{
    background:#ececec;
}
.status-manager .steps:first-child .dot_content .dot_line:first-child{
    height: 0rpx;
}
.status-manager .steps:last-child .dot_content .dot_line:last-child{
    height: 0rpx;
}

.buy_together_content{
    width:100%;
     /* border-bottom:1px solid rgba(0, 0, 0, 0.08);  */
     // padding-bottom:48rpx;
}
.buy_together_out{
    width:100%;
    overflow:hidden;
   
}
.buy_together{
    width:100%;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
}
.buy_together:last-child{
    border: none;
}
.buy_together .title .face{
    width:46rpx;
    height: 46rpx;
    margin:0 10rpx 0 24rpx;
}
.buy_together .title .nickname{
    color: #333;
}
.buy_together .title .tips{
    margin-left:10rpx;
    font-size: 24rpx;
    color: #999999;
}

.buy_together .buy-list .item{
    // background:#F9F9F9;
}
.buy_together .buy-list .item:last-child{
    border:none;
}

.noRight{
    background:rgba(0, 0, 0, .8);
    color:#fff;
    padding:20rpx 40rpx;
    font-size:28rpx;
    border-radius:20rpx;  
}
.noRight_out .bt{
    margin:60rpx auto;
    color:#40404E;
    border-radius:6rpx;
    width:200rpx;
    text-align:center;
    font-size:30rpx;
    padding:16rpx;
    background:#8DEFD0;

}
.noRight_out{
    position:absolute;
    left:50%;
    top:50%;
    width:480rpx;
    margin-left:-240rpx;
    margin-top:-60rpx;
}
.get_time{
    font-weight: 500;
    color: #333;
    font-size: 30rpx;
    margin-left:24rpx;
    margin-bottom:32rpx;
    border-top:1rpx solid rgba(0, 0, 0, 0.08);
    padding-top:32rpx;
}
.get_time text{
    color: #308AFF;
}
.red_packet{
    width: 128rpx;
    height: 148rpx;
    position: fixed;
    top: 45%;
    right: 24rpx;
    border: none;
    padding: 0;
    image{
        width: 100%;
        height: 100%;
    }
}
.packet_share{
    width: 600rpx;
    // height: 530rpx;
    background: #fff;
    position: relative;
    z-index: 2;
    top: 400rpx;
    border-radius: 16rpx;
    .packet_share_view{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:30rpx 0;
        image{
            width: 330rpx;
            height: 250rpx;
            
        }
        .black_text{
            color: #000;
            font-size: 32rpx;
            margin: 32rpx 0 20rpx 0;
        }
        .gray_text{
            color: #333333;
            font-size: 26rpx;
        }
    }
    .group-button{
        border-top: 1rpx solid rgba(221, 221, 221, .3);
        margin: 0;
        button{
            font-size: 32rpx;
            color: #333;
            flex:1;
        }
        .red_text{
            color: #FF282E;
            border-left: 1rpx solid rgba(221, 221, 221, .3);
            font-weight: 500;
        }
    }
}

